<template>
  <layout title="list列表" bg-color="#F4F4F4">
    <layout-content title="基础使用">
      <tn-list>普通列表</tn-list>
      <tn-list shape="round" :custom-style="listCustomStyle">圆角列表</tn-list>
    </layout-content>

    <layout-content title="底部边框">
      <tn-list bottom-line>普通列表</tn-list>
      <tn-list bottom-line :line-offset="false" :custom-style="listCustomStyle">不带缩紧底部边框</tn-list>
    </layout-content>

    <layout-content title="设置颜色">
      <tn-list type="primary">普通列表</tn-list>
      <tn-list type="success" :custom-style="listCustomStyle">普通列表</tn-list>
      <tn-list type="warning" :custom-style="listCustomStyle">普通列表</tn-list>
      <tn-list type="danger" :custom-style="listCustomStyle">普通列表</tn-list>
      <tn-list type="info" :custom-style="listCustomStyle">普通列表</tn-list>
      <tn-list bg-color="tn-bg-indigo--light" :custom-style="listCustomStyle">普通列表</tn-list>
      <tn-list bg-color="tn-bg-indigo--light" color="tn-color-blue" :custom-style="listCustomStyle">普通列表</tn-list>
    </layout-content>

    <layout-content title="设置大小">
      <tn-list font-size="32">普通列表</tn-list>
      <tn-list font-size="32" font-bold :custom-style="listCustomStyle">普通列表</tn-list>
    </layout-content>

    <layout-content title="设置点击效果">
      <tn-list hover-class="tn-hover">普通列表</tn-list>
    </layout-content>

    <layout-content title="右边内容">
      <tn-list icon="right">带图标列表</tn-list>
      <tn-list icon="right" type="primary" :custom-style="listCustomStyle">带图标列表</tn-list>
      <tn-list :icon="true" :custom-style="listCustomStyle">
        带图标列表
        <template v-slot:icon>
          <view class="tn-text-sm tn-color-gray">点击跳转</view>
        </template>
      </tn-list>
    </layout-content>

    <layout-content title="使用示例">
      <tn-list>
        <tn-icon icon="discover"></tn-icon>
        <text class="tn-margin-left-sm">列表内容</text>
      </tn-list>
      <tn-list :icon="true" :custom-style="listCustomStyle">
        <tn-icon icon="order" color="tn-color-green"></tn-icon>
        <text class="tn-margin-left-sm">列表内容</text>
        <template v-slot:icon>
          <view class="tn-text-sm tn-color-gray">定个小目标吧</view>
        </template>
      </tn-list>
      <tn-list :icon="true" :custom-style="listCustomStyle">
        <tn-icon icon="upload" color="tn-color-blue"></tn-icon>
        <text class="tn-margin-left-sm">列表内容</text>
        <template v-slot:icon>
          <tn-button shape="round">
            <tn-icon icon="upload"></tn-icon>
            <text>上传</text>
          </tn-button>
        </template>
      </tn-list>

      <tn-list :custom-style="listCustomStyle">
        <view class="message__item">
          <view class="message__avatar">
            <tn-avatar icon="https://tnuiimage.tnkjapp.com/avatar/xiaomai3.jpg" size="90" shape="square" bg-color="transparent"></tn-avatar>
          </view>
          <view class="message__data">
            <view class="message__top">
              <view class="message__title">图鸟UI开源线报群</view>
              <view class="message__time">22:22</view>
            </view>
            <view class="message__bottom">
              <view class="message__desc">图鸟北北: 准备更新版本了</view>
              <view class="message__notice">
                <tn-icon icon="notice-no"></tn-icon>
              </view>
            </view>
          </view>
        </view>
      </tn-list>
    </layout-content>

    <view style="height: 20rpx;"></view>
  </layout>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { CSSProperties, ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import TnList from '@/tuniao-ui/components/tn-list/src/List.vue'
import TnIcon from '@/tuniao-ui/components/tn-icon/src/Icon.vue'
import TnButton from '@/tuniao-ui/components/tn-button/src/Button.vue'
import TnAvatar from '@/tuniao-ui/components/tn-avatar/src/Avatar.vue'

// 自定义列表演示
const listCustomStyle: CSSProperties = {
  marginTop: '20rpx'
}

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}
</script>

<style lang="scss" scoped>

.message {
  &__item {
    width: 100%;
    height: 90rpx;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
  }
  &__avatar {
    width: 90rpx;
  }
  &__data {
    flex: 1;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around;
    padding: 6rpx 0rpx;
    margin-left: 20rpx;
  }
  &__top, &__bottom {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: space-between;
  }
  &__bottom {
    font-size: 24rpx;
    color: #AAAAAA;
  }
  &__time {
    font-size: 24rpx;
    color: #AAAAAA;
  }
}
</style>
